<template>
  <el-form ref="modify" :model="formData" :rules="rules" label-width="150px">
    <el-form-item label="旧密码：" prop="old">
      <el-col :span="8" :offset="0">
        <el-input
          class="rp-input"
          label="旧密码"
          placeholder="请输入旧密码"
          v-model="formData.old"
          show-password
          clearable
          suffix-icon="el-icon-edit"
        ></el-input>
      </el-col>
    </el-form-item>
    <el-form-item label="新密码：" prop="recent">
      <el-col :span="8" :offset="0">
        <el-input
          class="rp-input"
          placeholder="请输入新密码"
          v-model="formData.recent"
          show-password
          clearable
          suffix-icon="el-icon-edit"
        ></el-input>
      </el-col>
    </el-form-item>
    <el-form-item label="确认密码：" prop="confirm">
      <el-col :span="8" :offset="0">
        <el-input
          class="rp-input"
          placeholder="请确认新密码"
          v-model="formData.confirm"
          show-password
          clearable
          suffix-icon="el-icon-edit"
        ></el-input>
      </el-col>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit" :loading="submitFlag">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data() {
      const that = this
      return {
        submitFlag: false,
        formData: { old: '', recent: '', confirm: '' },
        rules: {
          old: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
          recent: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
          confirm: [
            {
              required: true,
              validator(rule, value, callback) {
                if (value === '') {
                  callback(new Error('请再次输入密码'))
                } else if (value !== that.formData.recent) {
                  callback(new Error('两次输入密码不一致!'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      submit() {
        this.$refs.modify.validate(val => {
          if (val) {
            this.submitFlag = true
            setTimeout(() => {
              this.submitFlag = false
              this.$refs.modify.resetFields()
              this.$message({
                message: '恭喜你，修改成功',
                type: 'success'
              })
            }, 500)
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .rp-list {
    margin-bottom: 20px;
    .rp-label {
      text-align: right;
    }
  }
</style>
